<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>书籍详情</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">
  <link rel="stylesheet" href="/static/layuiadmin/style/template.css" media="all">
  <style>
    .layui-card span[lay-separator] {
      margin: 0 10px;
      color: #999;
      font-weight: bold;
    }
    .layui-layer-demo .layui-layer-title {
      border: none;
      background-color: #333;
      color: #fff;
    }
  </style>
</head>
<body>


<div class="layui-fluid layadmin-homepage-fluid">
  <div class="layui-row layui-col-space8">
    <div class="layui-col-md3">
      <div class="layadmin-homepage-panel layadmin-homepage-shadow">
        <div class="layui-card text-center">
          <div class="layui-card-body">
            <div class="layadmin-homepage-pad-ver">
              <img class="layadmin-homepage-pad-img" style="border-radius: 0%;" src="{$novel.cover_text}" width="72" height="96">
            </div>
            <h4 class="layadmin-homepage-font">{$novel.title}</h4>
            <p class="layadmin-homepage-min-font">{$novel.author}</p>
          </div>
        </div>
        <p class="layadmin-homepage-about">
          关于书籍
        </p>
        <ul class="layadmin-homepage-list-group">
          <li class="list-group-item"><strong>字数：</strong>{$novel.number_words}</li>
          <li class="list-group-item"><strong>频道：</strong>{$novel.freq['name']}</li>
          <li class="list-group-item"><strong>分类：</strong>{$novel.novel_class['name']}</li>
          <li class="list-group-item"><strong>状态：</strong>{$novel.update_status_text}</li>
          <li class="list-group-item"><strong>千字：</strong>{$words_fee}书币</li>
          <li class="list-group-item"><strong>30元：</strong>约可读{$read30Number}章（3000书币，不统计免费章节）
          </li>
        </ul>
        <p class="layadmin-homepage-about">
          简介
        </p>
        <div class="layadmin-homepage-pad-hor">
          <mdall>{$novel.brief|trim}</mdall>
        </div>
        <ul class="layadmin-homepage-list-inline">

        </ul>
      </div>
    </div>
    <div class="layui-col-md9">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header">
            章节列表
          </div>
          <div class="layui-card-body">
            <table class="layui-table">
              <colgroup>
                <col>
                <col width="250">
                <col width="200">
              </colgroup>
              <thead>
              <tr>
                <th>标题</th>
                <th>字数</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              {foreach $chapterList as $k => $v}
              <tr>
                <td>p
                  {if $v.is_pay == 1}
                  <i class="layui-icon layui-icon-rmb" style="color: #ff9c00"></i>
                  {/if}
                  <a class="link" href="javascript:;" data-type="preview" data-id="{$novel.id}" data-no="{$v.chapter_no}">{$v.name}</a>
                  {if $novel.recom_chapter == $v.chapter_no}
                  <span class="layui-badge">推荐加桌章节</span>
                  {/if}
                </td>
                <td>{$v.words}</td>
                <td>
                  {if $v.is_pay == 0}
                  <a class="link" href="javascript:;" style="color: #01AAED;" data-type="getLink" data-id="{$novel.id}" data-no="{$v.chapter_no}" >获取推广链接</a>
                  {/if}
                </td>
              </tr>
              {/foreach}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


  <script src="/static/layuiadmin/layui/layui.js"></script>  
  <script>
  layui.config({
    base: '/static/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index'],function () {
    var $ = layui.$
            ,admin = layui.admin
            ,layer = layui.layer;
    //事件
    var active = {
      getLink: function(othis){
        var novel_id = othis.data('id');
        var chapter_no = othis.data('no');
        layer.open({
          type: 2
          ,title: '获取推广链接'
          ,offset: '15px'
          ,content: '/spread/linkInfoForm.html?novel_id={$novel.id}&chapter_no=' + chapter_no
          ,area: ['520px', '560px']
          ,btn: ['确定', '取消']
          ,yes: function(index, layero){
            var iframeWindow = window['layui-layer-iframe'+ index]
                    ,submit = layero.find('iframe').contents().find("#LAY-user-role-submit");

            //监听提交
            iframeWindow.layui.form.on('submit(LAY-user-role-submit)', function(data){
              var field = data.field; //获取提交的字段
              field.novel_id = novel_id;
              field.chapter_no = chapter_no;
              //提交 Ajax 成功后，静态更新表格中的数据
              //$.ajax({});
              admin.req({
                url: '/spread/createLink'
                , type: "POST"
                , data: field
                , done: function (res) {
                  layer.msg('创建成功', {icon: 1, time: 1000}, function () {
                    layer.close(index); //关闭弹层
                    $("#hap").val(res.data.hap_link);
                    $("#hapjs").val(res.data.hapjs_link);
                    layer.open({
                      type: 1,
                      title:'链接详情',
                      offset: '15px',
                      area: '700px',
                      skin: 'layui-layer-demo', //样式类名
                      closeBtn: 0, //不显示关闭按钮
                      anim: 2,
                      shadeClose: true, //开启遮罩关闭
                      content: $('.link-show')
                    });
                  });
                },not_finish:function (res) {
                  layer.msg(res.msg);
                }
              });
            });
            submit.trigger('click');
          }
        });
      },
      copy1:function () {
        $("#hap").select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        layer.msg('复制成功', {icon: 1, time: 1000});
      },
      copy2:function () {
        $("#hapjs").select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        layer.msg('复制成功', {icon: 1, time: 1000});
      },
      preview:function (othis) {
        var novel_id = othis.data('id');
        var chapter_no = othis.data('no');
        layer.open({
          type: 2,
          title: '预览',
          shadeClose: true,
          shade: 0.5,
          maxmin: true, //开启最大化最小化按钮
          area: ['40%', '90%'],
          content: '/novel/preview?novel_id=' + novel_id + '&chapter_no=' + chapter_no
        });
      }
    }
    $('.link').on('click', function(){
      var type = $(this).data('type');
      var othis = $(this);
      active[type] ? active[type].call(this,othis) : '';
    });
  });
  </script>
</body>
<div class="link-show" style="padding:20px;display: none;">
  <form class="layui-form layui-form-pane" action="">

    <div class="layui-form-item">
      <label class="layui-form-label">hap链接</label>
      <div class="layui-inline" style="width: 460px;">
        <input type="text" id="hap" class="layui-input" value="" readonly>
      </div>

      <div class="layui-inline">
        <button type="button" class="layui-btn link" data-type="copy1">复制</button>
      </div>
      <div class="layui-input-block">
        <div class="layui-form-mid layui-word-aux">用于广告投放，浏览器不可访问</div>
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">hapjs链接</label>
      <div class="layui-inline" style="width: 460px;">
        <input type="text" id="hapjs" class="layui-input" value="" readonly>
      </div>
      <div class="layui-inline">
        <button type="button" class="layui-btn link" data-type="copy2">复制</button>
      </div>
      <div class="layui-input-block">
        <div class="layui-form-mid layui-word-aux">浏览器访问跳转App，不可用于投放</div>
      </div>
    </div>

  </form>

</div>
</html>

